<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="lib/jqplot/excanvas.js"></script><![endif]-->
		<script type="text/javascript" src="lib/jquery/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/jquery.jqplot.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.ohlcRenderer.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
		<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
		<script type="text/javascript" src="lib/jquery-ui-1.8.15/js/jquery-ui-1.8.15.custom.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
		<link type="text/css" rel="stylesheet" href="lib/1200.css" />
		<link type="text/css" rel="stylesheet" href="lib/jqplot/jquery.jqplot.css" />
		<link type="text/css" rel="stylesheet" href="lib/jquery-ui-1.8.15/css/smoothness/jquery-ui-1.8.15.custom.css" />
		<link type="text/css" rel="stylesheet" href="main.css" />
    </head>
    <body>
		<div id="tabs">
			<ul>
				<li><a href="#tab1">Screen #1</a></li>
				<li><a href="#tab2">Screen #2</a></li>
				<li><a href="#tab3">Screen #3</a></li>
			</ul>
			<div id="tab1" style="font-size:small;">
				<div class="container_12">
					<div class="grid_3">
						<div id="input_data_tit">Input Data</div>
						<div id="input_data_div">
							<div style="width:50%;float:left;">
								<div style="margin:3px 0px;"><b>AEI Ratios:</b></div>
								<div class="input_area_div">
							        <textarea id="exp_data"></textarea>
								</div>
							</div>
							<div style="width:50%;float:left;">
								<div style="margin:3px 0px;"><b>Exp Error:</b></div>
								<div class="input_area_div">
							        <textarea id="error_data"></textarea>
								</div>
	
							</div>
							<div style="margin:5px 0px 0px 15px;float:left;">
								<div style="float:left;width:58px;">
									<input type="button" value="Save" onclick="auto_save()" style="font-size:small;"/>
									<input type="button" value="Clear" onclick="clear_tab1()" style="font-size:small;"/>
								</div>
								<div style="float:left;">
									<input type="button" value="Plot it!" onclick="show_exp_plot()" style="font-size:28px;margin-top:10px;" />
								</div>
								<div id="data_num_div"></div>
							</div>
						</div>
					</div>
					<div class="grid_9">
						<div id="exp_plot_tit">Log<sub>2</sub>AEI Population Distribution (with error bars <input type="checkbox" id="show_err_bar_exp"/>)</div>
						<div id="tit_date1">Date:YYYYMMDD</div>
				        <div id="exp_plot">
				        	<div id="exp_plot_div">
								<h1 style="margin-top:120px">  Graph Here </h1>
							</div>
						</div>
					</div>
				</div>			
			</div>

			<div id="tab2" style="font-size:small;">
				<div class="container_12">
				    <div class="grid_3">
			        	<div id="para_tit">Parameters</div>
						<div id="para_col_input">
							<div id="para_tit_input"><b>Input</b></div>
				        	<div class="sep_line"></div>
							<table id="input_tab_1">
								<tr>
									<td id="para_PA_tit">P(A): </td>
									<td><input id="para_PA" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td id="para_PB_tit">P(B): </td>
									<td><input id="para_PB" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>P(C): </td>
									<td><input id="para_PC" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>P(M): </td>
									<td><input id="para_PM" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>D'(AM): </td>
									<td><input id="para_DDAM" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td id="para_DDBM_tit">D'(BM): </td>
									<td><input id="para_DDBM" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>D'(CM): </td>
									<td><input id="para_DDCM" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td id="para_DDAB_tit">D'(AB): </td>
									<td><input id="para_DDAB" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>D'(AC): </td>
									<td><input id="para_DDAC" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>D'(BC): </td>
									<td><input id="para_DDBC" type="text" class="para_input"></td>
								</tr>
							</table>
							<table>
								<tr class="para_caled">
									<td>P(<i>Trans</i>)=1.0</td>
									<td><input type="checkbox" id="pta_model_cb" /></td>
								</tr>
							</table>
							<div class="sep_line"></div>
							<table id="input_tab_2" style='margin:23px 0px;'>
								<tr>
									<td>j:&nbsp;&nbsp;&nbsp;</td>
									<td><input id="para_j" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>k:</td>
									<td><input id="para_k" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>l:</td>
									<td><input id="para_l" type="text" class="para_input"></td>
								</tr>
								<tr>
									<td>m:</td>
									<td><input id="para_m" type="text" class="para_input"></td>
								</tr>
							</table>						
						</div><!-- end of div "para_col_input" -->
						<div id="para_col_caled">
							<div id="para_tit_caled"><b>Calculated</b></div>
							<div class="sep_line"></div>
							<table>
								<tr class="para_caled">
									<td id="para_Pa_tit">P(a): </td>
									<td><b id="para_Pa"></b></td>
								</tr>
								<tr class="para_caled">
									<td id="para_Pb_tit">P(b): </td>
									<td><b id="para_Pb"></b></td>
								</tr>
								<tr class="para_caled">
									<td>P(c): </td>
									<td><b id="para_Pc"></b></td>
								</tr>
								<tr class="para_caled">
									<td>P(m): </td>
									<td><b id="para_Pm"></b></td>
								</tr>
								<tr class="para_caled">
									<td id="para_DAM_tit">D(AM): </td>
									<td><b id="para_DAM"></b></td>
								</tr>
								<tr class="para_caled">
									<td id="para_DBM_tit">D(BM): </td>
									<td><b id="para_DBM"></b></td>
								</tr>
								<tr class="para_caled">
									<td>D(CM): </td>
									<td><b id="para_DCM"></b></td>
								</tr>
								<tr class="para_caled">
									<td id="para_DAB_tit">D(AB): </td>
									<td><b id="para_DAB"></b></td>
								</tr>
								<tr class="para_caled">
									<td>D(AC): </td>
									<td><b id="para_DAC"></b></td>
								</tr>
								<tr class="para_caled">
									<td>D(BC): </td>
									<td><b id="para_DBC"></b></td>
								</tr>
								<tr class="para_caled">
									<td></td>
									<td></td>
								</tr>
							</table>
							<div class="sep_line"></div>
							<div style="text-align:center;height:145px;">
								<form id="model_sel_form">
									<input type="radio" name="model_sel" checked="checked" value="multi_model"> Multiplicative model</input><br />
									<input type="radio" name="model_sel" value="abcm_model"> P(ABCM) model 2</input><br />
									<input type="radio" name="model_sel" value="addi_model"> Additive model</input>
								</form>
								<select id='matr_comp_sel'>
										<option selected='selected' value='graph'>Graph</option>
										<option value='matrix'>Matrix</option>
								</select>
								<input type="button" value="OK!" onclick="comp_model()" style="font-size:x-large;width:80px;margin:15px 0 5px 0;" />
							</div>
						</div> <!-- end of div "para_col_caled" -->
						<div id="para_col_caled1">
							<div style="text-align:center;"><b>Calculated</b></div>
				        	<div class="sep_line"></div>
							<table>
								<tr class="para_caled">
									<td id="para_DABM_tit">D(ABM): </td>
									<td><b id="para_DABM"></b></td>
								</tr>
								<tr class="para_caled">
									<td>D(ACM): </td>
									<td><b id="para_DACM"></b></td>
								</tr>
								<tr class="para_caled">
									<td>D(BCM): </td>
									<td><b id="para_DBCM"></b></td>
								</tr>
								<tr class="para_caled">
									<td>D(ABC): </td>
									<td><b id="para_DABC"></b></td>
								</tr>
							</table>
							<div class="sep_line"></div>
							<table>
								<tr class="para_caled">
									<td>D(ABCM): </td>
									<td><b id="para_DABCM"></b></td>
								</tr>								
							</table>						
						</div><!-- end of div "para_col_caled1" -->	
				    </div> <!-- end of div "grid_3"-->
				    <div class="grid_9" id="comp_grid">
						<div id="comp_plot_tit">Comparison Graph (with error bars <input type="checkbox" id="comp_show_err_bar_cb" />; number of samples 
							<select id="compare_num_sel" style="font-size:small;width:42px;height:18px;">
							</select>
							)
						</div>
						<div id="tit_date2">Date:YYYYMMDD</div>
						<div id="comp_plot">
							<div id="cmp_graph_opts">
								<input type="checkbox" id="comp_show_exp_cb" checked="checked"/>Experiment data <br />
								<input type="checkbox" id="comp_show_model_cb" checked="checked"/>Model
							</div>
							<div id="bio_info_div">
								Gene: <input id="bio_gene" type="text" />&nbsp;&nbsp;&nbsp;mSNP: <input id="bio_snp" type="text" />
							</div>
							<div id="zoom_div">
								<a href="#" title="make graph smaller" onclick="ensmall_plot();" style="border-top: 1px solid #555; border-bottom: 1px solid #555; border-left: 8px solid #555; border-right: 8px solid #555; font-size: 8px; padding: 0 6px; vertical-align: 4px;">&nbsp;</a>
								<a href="#" title="reset graph" onclick="reset_plot();" style="border-top: 1px solid #555; border-bottom: 1px solid #555; border-left: 5px solid #555; border-right: 5px solid #555; font-size: 8px; padding: 0 8px; vertical-align: 4px;">&nbsp;</a>
								<a href="#" title="make graph larger" onclick="enlarge_plot();" style="border-top: 1px solid #555; border-bottom: 1px solid #555; border-left: 2px solid #555; border-right: 2px solid #555; font-size: 8px; padding: 0 10px; vertical-align: 4px;">&nbsp;</a>
							</div>
							<div id="comp_plot_div" style="text-align:center;"><h1 style="margin:120px"> Graph Here </h1></div>
						</div>
						<div id="lr_div">
							<div id="lr_plot_tit">Linear Regression</div>
							<div id="lr_plot_main">
									<div id="lr_plot"></div>
									<div id="lr_stat">
									</div>
							</div>
						</div>
						<div id="stat_div">
							<div id="statistics_tit">Statistics</div>
							<div id="statistics"></div>
						</div>
				    </div>	<!-- End of grid_9 -->
					<div class="grid_9" id="matr_grid">
				    	<div id="matr_tit">Data Matrix</div>
				        <div id="matr_div"><h1 style="margin:120px">  Matrix Here </h1></div>
						<div id="jkl_matr_div"></div>
						<div id="matr_opt_div">
						</div>
					</div>
				</div>	
			</div>	<!-- End of tab2 -->
			<div id="tab3"  style="font-size:small;">
				<div class="container_12">
					<div class="grid_5">
						<div id="tab3_input_data_tit">Input Data</div>
						<div id="tab3_input_data_div">
							<div id="tab3_model_input_div">
							
								<div id="tab3_para_col_input">
									<div id="tab3_para_tit_input"><b>Input</b></div>
						        	<div class="sep_line"></div>
									<table id="tab3_input_tab_1">
										<tr>
											<td id="tab3_para_PA_tit">P(A): </td>
											<td><input id="tab3_para_PA" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td id="tab3_para_PB_tit">P(B): </td>
											<td><input id="tab3_para_PB" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>P(C): </td>
											<td><input id="tab3_para_PC" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>P(M): </td>
											<td><input id="tab3_para_PM" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>D'(AM): </td>
											<td><input id="tab3_para_DDAM" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td id="tab3_para_DDBM_tit">D'(BM): </td>
											<td><input id="tab3_para_DDBM" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>D'(CM): </td>
											<td><input id="tab3_para_DDCM" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td id="tab3_para_DDAB_tit">D'(AB): </td>
											<td><input id="tab3_para_DDAB" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>D'(AC): </td>
											<td><input id="tab3_para_DDAC" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>D'(BC): </td>
											<td><input id="tab3_para_DDBC" type="text" class="para_input"></td>
										</tr>
									</table>
									<div class="sep_line"></div>
									<table id="tab3_input_tab_2" style='margin:8px 0px;'>
										<tr>
											<td>j:&nbsp;&nbsp;&nbsp;</td>
											<td><input id="tab3_para_j" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>k:</td>
											<td><input id="tab3_para_k" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>l:</td>
											<td><input id="tab3_para_l" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>m:</td>
											<td><input id="tab3_para_m" type="text" class="para_input"></td>
										</tr>
										<tr>
											<td>rVar:</td>
											<td>
												<select id="model_abc_sel_form">
													<option value="A" selected="selected">A</option>
													<option value="B">B</option>
													<option value="C">C</option>
												</select>
											</td>
										</tr>
									</table>
								</div><!-- end of div "para_col_input" -->
								<div id="tab3_para_col_caled">
									<div id="tab3_para_tit_caled"><b>Calculated</b></div>
									<div class="sep_line"></div>
									<table>
										<tr class="para_caled">
											<td id="tab3_para_Pa_tit">P(a): </td>
											<td><b id="tab3_para_Pa"></b></td>
										</tr>
										<tr class="para_caled">
											<td id="tab3_para_Pb_tit">P(b): </td>
											<td><b id="tab3_para_Pb"></b></td>
										</tr>
										<tr class="para_caled">
											<td>P(c): </td>
											<td><b id="tab3_para_Pc"></b></td>
										</tr>
										<tr class="para_caled">
											<td>P(m): </td>
											<td><b id="tab3_para_Pm"></b></td>
										</tr>
										<tr class="para_caled">
											<td id="tab3_para_DAM_tit">D(AM): </td>
											<td><b id="tab3_para_DAM"></b></td>
										</tr>
										<tr class="para_caled">
											<td id="tab3_para_DBM_tit">D(BM): </td>
											<td><b id="tab3_para_DBM"></b></td>
										</tr>
										<tr class="para_caled">
											<td>D(CM): </td>
											<td><b id="tab3_para_DCM"></b></td>
										</tr>
										<tr class="para_caled">
											<td id="tab3_para_DAB_tit">D(AB): </td>
											<td><b id="tab3_para_DAB"></b></td>
										</tr>
										<tr class="para_caled">
											<td>D(AC): </td>
											<td><b id="tab3_para_DAC"></b></td>
										</tr>
										<tr class="para_caled">
											<td>D(BC): </td>
											<td><b id="tab3_para_DBC"></b></td>
										</tr>
									</table>
									<div class="sep_line"></div>
									<div style="text-align:center;height:148px;">
										<table>
										<tr class="para_caled">
											<td id="tab3_para_DABM_tit">D(ABM): </td>
											<td><b id="tab3_para_DABM"></b></td>
										</tr>
										<tr class="para_caled">
											<td>D(ACM): </td>
											<td><b id="tab3_para_DACM"></b></td>
										</tr>
										<tr class="para_caled">
											<td>D(BCM): </td>
											<td><b id="tab3_para_DBCM"></b></td>
										</tr>
										<tr class="para_caled">
											<td>D(ABC): </td>
											<td><b id="tab3_para_DABC"></b></td>
										</tr>
										</table>
										<div class="sep_line"></div>
										<table>
											<tr class="para_caled">
												<td>D(ABCM): </td>
												<td><b id="tab3_para_DABCM"></b></td>
											</tr>								
										</table>	
									</div>
								</div> <!-- end of div "para_col_caled" -->
							</div>	
							
							<div id="tab3_exp_input_div">
								<div style="width:100px;float:left;">
									<div style="margin:3px 0px;"><b>ΔCt's:</b></div>
									<div class="input_area_div">
								        <textarea id="tab3_delta_ct_data"></textarea>
									</div>
								</div>
								<div style="width:50px;float:left;">
									<div style="margin:3px 0px;">
										<b>A:</b>
										<input type="radio" name="exp_abc" value="A" checked="checked" />
									</div>
									<div class="input_area_div">
								        <textarea id="tab3_A_data"></textarea>
									</div>
								</div>
								<div style="width:50px;float:left;">
									<div style="margin:3px 0px;">
										<b>B:</b>
										<input type="radio" name="exp_abc" value="B"/>
									</div>
									<div class="input_area_div">
								        <textarea id="tab3_B_data"></textarea>
									</div>
								</div>
								<div style="width:50px;float:left;">
									<div style="margin:3px 0px;">
										<b>C:</b>
										<input type="radio" name="exp_abc" value="C"/>
									</div>
									<div class="input_area_div">
								        <textarea id="tab3_C_data"></textarea>
									</div>
								</div>
								<div style="width:100px;float:left;">
									<div style="text-align:left;width:80px;">									
										<input type="button" value="Save" onclick="auto_save()" style="font-size:12px;margin-top:5px;"/>
										<input type="button" value="Clear" onclick="clear_tab3()" style="font-size:12px;margin-top:1px;"/>
										<select id='tab3_matr_comp_sel'>
											<option selected='selected' value='graph'>Graph</option>
											<option value='matrix'>Matrix</option>
										</select>
										<input type="button" value="OK!" onclick="comp_lr_compare()" style="font-size:25px;margin-top:3px;width:80px;" />
									</div>
								</div>
								<div style="width:150px;float:left;">
									<div>
										<div style="width:33%;float:left;">
											A=<input type="text" style="width:12px;"/><br />
											a=<input type="text" style="width:12px;"/><br />
										</div>
										<div style="width:33%;float:left;">
											B=<input type="text" style="width:12px;"/><br />
											b=<input type="text" style="width:12px;"/><br />
										</div>
										<div style="width:33%;float:left;">
											C=<input type="text" style="width:12px;"/><br />
											c=<input type="text" style="width:12px;"/><br />
										</div>
									</div>
									<div style="text-align:left;">
											VarA= <input type="text" style="width:80px;"/><br />
											VarB= <input type="text" style="width:80px;"/><br />
											VarC= <input type="text" style="width:80px;"/>
									</div>
								</div>
							</div>	
						</div>
					</div>
					<div class="grid_7" id="tab3_lr_grid">
						<div id="tab3_lr_tit">Linear Regression Comparison</div>
				        <div id="tab3_lr_plot_main">
								<div id="tab3_lr_plot_div_exp_main">
									<div id="tab3_lr_plot_exp"><h1 style="padding-top:85px"> Experimental Linear Regression </h1></div>
									<div id="tab3_lr_stat_exp"></div>
								</div>
								<div id="tab3_lr_plot_div_model_main">
									<div id="tab3_lr_plot_model"><h1 style="padding-top:85px"> Model Linear Regression </h1></div>
									<div id="tab3_lr_stat_model"></div>
								</div>
						</div>
					</div>
					<div class="grid_7" id="tab3_matr_grid">
				    	<div id="tab3_matr_tit">Data Matrix</div>
				        <div id="tab3_matr_div"><h1 style="margin:120px">  Matrix Here </h1></div>
						<div id="tab3_jkl_matr_div"></div>
						</div>
					</div>
				</div><!-- end of div "container_12" -->
			</div>	<!-- End of tabs -->
    </body>
</html>
